<!-- 表行 》 头像 》 展示 -->

<template>
  <div :class="`CoreWeb-Row${this.$options.name}`">
    <BtnText v-if="showBtn && url" :title="btnText" @click="toPreview" />

    <el-image v-if="url" v-show="!showBtn" ref="image" :src="url" :preview-src-list="[urlPreview]" :fit="fit" />
    <span v-else>{{ empty }}</span>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixRow from '../../mixRow'
import FormPhoto from '../../../form/FormPhoto'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'PhotoShow',

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: {
    ...CORE.WEB.RowCommon,
    ...CORE.WEB.RowPhoto,
    row: { type: Object, required: true }, // 行数据
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 填充属性
     */
    fit: FormPhoto.computed.fit,

    /**
     * 绑定值
     */
    value() {
      const { row, bind, getValue } = this
      return getValue(row, bind)
    },

    /**
     * 预览值
     */
    valuePreview() {
      const { row, preview, bind, getValue } = this
      return getValue(row, preview || bind)
    },

    /**
     * 头像路径
     */
    url() {
      const { value, pathTrans, noTrans } = this
      return noTrans ? value : value ? pathTrans(value) : ''
    },

    /**
     * 预览路径
     */
    urlPreview() {
      const { valuePreview, pathTrans, noTrans } = this
      return noTrans ? valuePreview : valuePreview ? pathTrans(valuePreview) : ''
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 获取绑定值
     */
    getValue: mixRow.methods.getValue,

    /**
     * 点击预览
     */
    toPreview() {
      this.$refs.image.showViewer = true
    },
  },
}
</script>
